<template>
    <div class="wrap">
        <van-nav-bar
            title="积分钱包"
            right-text="积分转增"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
        <div>
            <ul class="nowGrade">
                <li>当前积分</li>
                <li>0</li>
                <li>
                    <p>您在ABS的每次消费，均可获得会员积分</p>
                    <p>会员积分可直接抵扣现金使用。（100积分=1元）</p>
                    <p>*积分不可用于抵扣运费</p>
                </li>
            </ul>
            <ul class="gradeTimer">
                <li @click="grade(1)" :class="{border:num===1}">收入</li>
                <li @click="grade(2)" :class="{border:num===2}">支出</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
    data() {
        return {
            num:1
        };
    },

    components: {},

    computed: {},

    mounted() {},

    methods: {
        onClickLeft() {     // 左箭头回退
            this.$router.go(-1)
            this.$store.commit('changeShowMine',true)
        },
        onClickRight() {    // 进入历史订单
            // this.$router.push('/mine/InMine/history')
        },
        toIndex(){          // 回到首页
            this.$router.push('/')
        },
        grade(num){    // 卡券
            if(num===1){    // 进入未过期卡券
                this.num=num
            }else{          // 进入已过期卡券
                this.num=num
            }
        },
    }
};
</script>
<style lang='stylus' scoped>
// 主页面全屏
.wrap 
    background #fff
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index 350
    .nowGrade
        width 100%
        text-align center
        font-size 14px
        line-height 26px
        padding 20px 0 
        background #CA013D
        color #fff
        li:nth-of-type(2)
            font-size 36px
            line-height 60px

        
.gradeTimer
    width 100%
    display flex
    align-items center
    font-size 20px
    li 
        width 50%
        height 40px
        text-align center
        line-height 40px
        border 0
    .border
        border-bottom 2px solid #CD003D

// 改变Vant默认颜色
/deep/ .van-nav-bar__text 
    color #CA013D
/deep/ .van-nav-bar__arrow
    color #4E4E4E
</style>
